<template>
  <div class="big-screen">
    <dv-loading v-if="loading">数据加载中...</dv-loading>
    <dv-border-box-11 title="大数据中心" v-else>
      <section class="container">
        <section class="charts">
          <section class="bar-container">
            <section class="bar-button">
              <a-button-group v-model="placement">
                <a-button v-for="(item, index) in dimensions" :key="index">
                  <a @click="handleChangeDimension(item)">{{ item.label }}</a>
                </a-button>
              </a-button-group>
            </section>
            <Bar :barData="barData.data" :names="barData.names" class="bar" />
          </section>
          <section class="map-container">
            <Map :mapData="mapData" class="map" />
          </section>
        </section>
        <section class="opt-container">
          <!-- <a-dropdown>
            <a-button>{{ placement }}</a-button>
            <a-menu slot="overlay">
              <a-menu-item v-for="(item, index) in dimensions" :key="index">
                <a @click="handleChangeDimension(item)">{{ item.label }}</a>
              </a-menu-item>
            </a-menu>
          </a-dropdown> -->
          <HorizontalTimeline
            :items="timesList"
            :showControls="true"
            :activeIndex="activeIndex"
            @item-click="handleItemClick"
          />
        </section>
      </section>
    </dv-border-box-11>
  </div>
</template>

<script lang="ts">
// @ts-nocheck
import { Mixins, Component, Watch, Vue } from 'vue-property-decorator'
import { State, Mutation, Getter, namespace } from 'vuex-class'
import Map from './map.vue'
import Bar from './bar.vue'
import HorizontalTimeline from './HorizontalTimeline.vue'
import { famerServices } from '@/common/services/famer'
import { userModule } from '@/store/modules/user'
import { largeMemberServices } from '@/common/services/largeMember'
import { data } from './test.json'

@Component({
  components: {
    Map,
    Bar,
    HorizontalTimeline,
  },
})
export default class Echarts extends Vue {
  get currentProject() {
    return userModule.currentProject
  }
  get currentYear() {
    return userModule.currentYear
  }
  get isLarge() {
    return userModule.isLarge
  }

  get timesList() {
    return userModule.years.map((item) => {
      return {
        date: item.label,
        value: item.value,
      }
    })
  }

  loading = false
  mapData = []
  barData = []
  sourceData = []
  tempYear = ''
  placement = '总人数'

  // 当前查看的维度
  currentDimension = 'member_total'
  // 可以查看的维度
  dimensions = [
    {
      label: '总人数',
      value: 'member_total',
    },
    {
      label: '已享受补贴人数',
      value: 'used',
    },
    {
      label: '补贴面积',
      value: 'field',
    },
    {
      label: '补贴金额',
      value: 'pay_price_total',
    },
  ]

  activeIndex = 0

  mounted() {
    console.log(data, 'data', this.currentProject)
    // // @ts-ignore
    // this.mapData = data.data.map((item) => {
    //   return {
    //     name: item.s_a_nam,
    //     value: item.member_total,
    //     ...item,
    //   }
    // })
    this.getTotalData()
    // @ts-ignore
    // this.loading = false
    // publicServices.getCount().then(_=> {
    //   console.log('getCount', _)
    //   this.mapData = _.data.map(item => {
    //     return {
    //       name: alias[item.s_a_nam] || item.s_a_nam,
    //       value: item.member_total,
    //       ...item
    //     }
    //   })
    // }).finally(() => {
    //   this.loading = false;
    // })

    this.activeIndex = this.timesList.findIndex((item) => {
      return item.date === this.currentYear
    })
    this.handleItemClick({
      index: this.activeIndex,
      item: this.timesList[this.activeIndex],
    })
  }

  getTotalData() {
    this.loading = true
    const api = this.isLarge
      ? largeMemberServices.getLargeMemberDetail
      : famerServices.getMemberList
    return api({
      s_a_id: '50',
      year: this.tempYear || this.currentYear,
    })
      .then((res) => res.data.data.slice(1))
      .then((data) => {
        this.mapData = data.map((item) => {
          return {
            name: item.s_a_nam,
            value:
              item.bt_member_total === 0
                ? 0
                : (+item.used / +item.bt_member_total) * 100,
            ...item,
          }
        })
        this.sourceData = data
        this.updateBarData()
      })
      .finally(() => {
        this.loading = false
      })
  }

  @Watch('currentYear')
  currentYearWatch() {
    this.activeIndex = this.timesList.findIndex((item) => {
      return item.date === this.currentYear
    })
    this.tempYear = this.currentYear
    this.getTotalData()
  }

  @Watch('currentProject.task_nam')
  currentProjectWatch() {
    this.getTotalData()
  }

  handleChangeDimension(item: any) {
    this.currentDimension = item.value
    this.placement = item.label
    this.updateBarData()
  }

  handleItemClick({ item, index }: any) {
    this.activeIndex = index
    this.tempYear = item.date
    // const labels = item.value.map((item) => item.task_nam)
    // console.log(item, 'handleItemClick', labels)
    this.getTotalData()
    // this.mapData = this.mapData.map((mapItem) => {
    //   return {
    //     ...mapItem,
    //     value: mapItem[item.value] || 0,
    //   }
    // })
    // this.barData = this.barData.map((barItem) => {
    //   return {
    //     ...barItem,
    //     value: barItem[item.value] || 0,
    //   }
    // })
  }

  updateBarData() {
    const sortedData = this.sourceData
      .map((item) => {
        return {
          name: item.s_a_nam,
          value: item[this.currentDimension],
        }
      })
      .sort(function (a, b) {
        return a.value - b.value
      })
    this.barData = {
      names: sortedData.map((item) => {
        return item.name
      }),
      data: [
        {
          label: this.currentProject.task_nam,
          value: sortedData.map((item) => {
            return item.value
          }),
        },
      ],
    }
  }
}
</script>

<style lang="less" scoped>
.big-screen {
  width: 100%;
  height: 100%;
  background: #001529;
  position: absolute;
  top: 64px;
  left: 0;
  width: 100%;
  height: calc(100% - 64px);
  color: #fff;
}
.container {
  display: flex;
  width: 100%;
  height: 100%;
  padding-top: 20px;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  .opt-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px;
    flex: none;
    width: 100%;
  }
  .bar-button {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 30px 0 0 0;
    width: 100%;
    /deep/ .ant-btn {
      background-color: transparent;
      color: #fff;
    }
  }
  .charts {
    display: flex;
    width: 100%;
    height: calc(100% - 100px);
    flex: auto;
    justify-content: center;
    align-items: center;
    position: relative;
  }
  .bar-container {
    height: 100%;
    flex: 1;
  }
  .map-container {
    flex: 2;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
  }
  .map {
    width: 100%;
  }
}
</style>
